<template>
	<view class="content">
		<view class="whead">
			<view class="left backLeft">
				<view class="imgBox">
					<image src="../../static/img/back2.png" mode=""></image>
				</view>
				<view class="text">
					返回
				</view>
				
			</view>
			<view class="center logoCenter">
				商品详情--报价
			</view>
			<view class="right">
				<view class="imgBox">
					<image src="../../static/img/dian.png" mode=""></image>
				</view>
			</view>
		</view>
            <view class="news_list">
				<view class="header">
					<view class="header_box">
						<view class="price box">价格</view>
						<view class="bgt bg1">
						  <image src="../../static/img/bg.png"></image>
						</view>
						<view class="details box">详情</view>
						<view class="bgt bg2">
						  <image src="../../static/img/bg.png"></image>
						</view>
						<view class="price_trend box">价格走势</view>
						<view class="bgt bg3">
						  <image src="../../static/img/bg.png"></image>
						</view>
						<view class="complaint box">投诉</view>
					</view>
				</view>
				<view class="details_nr">联想轻薄笔记本  ideapad  330-15  i3-6006/4G/128G/银</view>
				
				<view class="chooseBox">
					<view class="time">
						时间范围：
					</view>
					<view class="sel">
						
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChange" :value="index" :range="array">
								<view class="uni-input">{{array[index]}}</view>
							</picker>
						</view>
							
					</view>
				</view>
				<view class="chooseBox">
					<view class="time">
						价格走势：
					</view>
					<view class="sel">
	
					</view>
					
				</view>
				<view class="imgcBox">
					<image src="../../static/img/line1.png" mode=""></image>
				</view>
			</view>
			

	</view>
</template>

<script>
	import "../../static/css/main.css"
	export default {
		data() {
			return {
			            title: 'picker',
			            array: ['最近一周', '最近一月', '最近三月', '最近一年'],
			            index: 0,
			        }
		},
		onLoad() {

		},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
		}
	}
</script>

<style lang="less">
	.content {
		text-align: left;
		height: 400upx;
	}
	.chooseBox{display: flex;padding: 20rpx;
		.time{width: 200rpx; font-size: 28rpx; color:#999}
		.sel{ color:#666; font-size: 32rpx;}
	}
	.imgcBox{clear: both; width: 100%; padding: 20rpx;
		image{width: 100%;}
	}
    .news_list {
      padding-top: 13rpx;
      display: flex;
      flex-direction: column;
    }
    
    .news_list .header {
      border-bottom: 2rpx solid #666666;
    }
    
    .news_list .header .header_box {
      padding-left: 16rpx;
      display: flex;
      flex-direction: row;
    }
    
    .news_list .header .header_box .box {
      font-size: 28rpx;
      color: #666666;
      line-height: 56rpx;
      height: 56rpx;
      width: 20.7%;
      text-align: center;
    }
    
    .news_list .header .header_box .box:hover {
      border-bottom: 4rpx solid #d2000f;
    }
    
    .news_list .header .header_box .bgt image {
    
      width: 2rpx;
      height: 40rpx;
      margin-top: 10rpx;
    }
    
    .news_list .header .header_box .bg1 {
      margin-left: 7rpx;
      margin-right: 22rpx;
    }
    
    .news_list .header .header_box .bg2 {
      margin-left: 22rpx;
      margin-right: 14rpx;
    }
    
    .news_list .header .header_box .bg3 {
      margin-left: 14rpx;
      margin-right: 16rpx;
    }
    
    .news_list .details_nr {
      width: 718rpx;
      font-size: 28rpx;
      color: #666666;
      border-bottom: 2rpx solid #666666;
      padding-left: 32rpx;
      padding-right: 64rpx;
      display: block;
      word-break: break-all;
      word-wrap: break-word;
      line-height: 42rpx;
      padding-top: 2rpx;
      letter-spacing: 1rpx;
	  text-align: left;
    }
    
    .news_list .banner {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      padding-left: 31rpx;
      padding-bottom: 9rpx;
      height: 145rpx;
    }
    
    .news_list .banner .dn image {
    
      width: 192rpx;
      height: 127rpx;
      margin-top: 9rpx;
    }
    
    .news_list .banner .details_list {
      padding-left: 28rpx;
    }
    
    .news_list .banner .details_list .lists {
      display: flex;
      flex-direction: row;
    }
    
    .news_list .banner .details_list .lists .left {
      font-size: 20rpx;
      color: #666666;
      line-height: 48rpx;
      width: 90rpx;
    }
    
    .news_list .banner .details_list .lists .right {
      font-size: 14rpx;
      color: #666666;
      line-height: 48rpx;
      text-indent: 18rpx;
      width: 130rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .news_list .sj_list {
      padding-left: 16rpx;
      padding-right: 16rpx;
    }
    
    .news_list .sj_list .inbox {
      margin-bottom: 12rpx;
    }
    
    .news_list .sj_list .inbox .top {
      background: #eeeeee;
      margin-bottom: 2rpx;
      display: flex;
      flex-direction: row;
      padding-left: 9rpx;
    }
    
    .news_list .sj_list .inbox .top .sj .sj_mc {
      font-size: 34rpx;
      color: #666666;
      line-height: 1em;
      padding-top: 27rpx;
      padding-bottom: 16rpx;
      width: 345rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .news_list .sj_list .inbox .top .sj .dp {
      width: 100rpx;
      height: 32rpx;
      background-color: #ffffff;
      border-radius: 10rpx;
      font-size: 18rpx;
      color: #666666;
      line-height: 32rpx;
      text-align: center;
      margin-bottom: 13rpx;
      margin-left: 20rpx;
    }
    
    .news_list .sj_list .inbox .top .sj_price {
      font-size: 27rpx;
      color: #666666;
      padding-left: 60rpx;
      padding-top:31rpx;
    }
    
    .news_list .sj_list .inbox .top .dh {
      padding-top: 18rpx;
      padding-left: 100rpx;
    }
    
    .news_list .sj_list .inbox .top .dh .phone image {
      width: 62rpx;
      height: 52rpx;
      margin-left: 10rpx;
    }
    
    .news_list .sj_list .inbox .top .dh .mj {
      font-size: 19rpx;
      color: #666666;
      letter-spacing: 1rpx;
      line-height: 1em;
      padding-top: 14rpx;
    }
    
    .news_list .sj_list .inbox .bottom {
      background: #eeeeee;
      display: flex;
      flex-direction: row;
      width: 100%;
    }
    
    .news_list .sj_list .inbox .bottom .number .sl {
      display: flex;
      flex-direction: row;
      padding-left: 31rpx;
      padding-top: 17rpx;
    }
    
    .news_list .sj_list .inbox .bottom .number .sl .sl_box {
      font-size: 28rpx;
      color: #666666;
      background: #ffffff;
      width: 40rpx;
      height: 38rpx;
      margin-right: 10rpx;
      line-height: 38rpx;
      text-align: center;
    }
    
    .news_list .sj_list .inbox .bottom .number .num {
      font-size: 22rpx;
      color: #666666;
      line-height:1em;
      padding-top: 13rpx;
      padding-bottom: 7rpx;
      padding-left: 20rpx;
    }
    
    .news_list .sj_list .inbox .bottom .gwc {
      display: flex;
      flex-direction: row;
      margin-top: 27rpx;
      margin-left: 238rpx;
    }
    
    .news_list .sj_list .inbox .bottom .gwc .gwc_left {
      border-radius: 10rpx 0rpx 0rpx 10rpx;
      font-size: 22rpx;
      color: #666666;
      width: 140rpx;
      height: 48rpx;
      line-height: 48rpx;
      text-align: center;
      background: #ffffff;
    }
    
    .news_list .sj_list .inbox .bottom .gwc .gwc_right {
      border-radius: 0rpx 10rpx 10rpx 0rpx;
      font-size: 22rpx;
      color: #ffffff;
      width: 140rpx;
      height: 48rpx;
      line-height: 48rpx;
      text-align: center;
      background: #d2000f;
    }
	
</style>
